<!--{__NOLAYOUT__}-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录 | 后台管理</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="__STATIC__/css/app.min.css">
    <script src="__STATIC__/plugins/geetest/gt.js"></script>
    <script src="__STATIC__/js/app.min.js"></script>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        #notice {
            color: red;
        }
    </style>
</head>
<body class="hold-transition login-page" style="background-image: url('__STATIC__/images/background/{$bg_num}.jpg');">
<div class="login-box">
    <div class="login-logo">
        <a style="color: white;font-family: 'Microsoft Yahei'">后台登录</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body" style="border-radius: 10px;">
        <p class="login-box-msg">欢迎来到Bear后台管理系统</p>
        <form action="" method="post" onsubmit="member()">
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group has-feedback">
                        <input id="user_name" name="user_name" type="text" class="form-control" placeholder="帐号">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                </div>
            </div>
            {if $Think.session.error_message}
            {include file="template/loginerror" /}
            {/if}
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group has-feedback">
                        <input name="password" type="password" class="form-control" placeholder="密码">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                </div>
            </div>
            <div id="wait" class="alert alert-warning alert-dismissible show" style="padding: 8px;margin-bottom: 10px;">
                正在加载验证码...
            </div>

            <div id="notice" class="alert alert-danger alert-dismissible hide" style="padding: 8px;margin-bottom: 10px;">
                请先完成验证
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <div id="embed-captcha"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox">
                        <label id="remember_me">
                            <input id="remember_checkbox" type="checkbox"> 记住我
                        </label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <input placeholder="记住密码" hidden name="is_remember" id="is_remember" value="0">
                    {:token()}
                    <button type="submit" class="btn btn-primary btn-block btn-flat" id="login_button">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- /.login-box -->
<script>
    function member() {
        if ($('#remember_checkbox').prop('checked')) {
            console.log(1);
            $('#is_remember').val(1);
        } else {
            $('#is_remember').val(0);
            console.log(0);
        }
    }

    $(function () {
        $("#user_name").focus();
    });


    var handlerEmbed = function (captchaObj) {
        $("#login_button").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice").addClass('show') ;
                $("#notice").removeClass('hide') ;
                setTimeout(function () {
                    $("#notice").addClass('hide') ;
                    $("#notice").removeClass('show') ;
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "get_geetest_status.html", // 加随机数防止缓存
        type: "post",
        dataType: "json",
        success: function (data) {
            console.log(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>
</body>
</html>
<script>
    console.log('%c BUG？反馈->%c i@yufuping.com',';color:#1e90ff',';color:#070cfe');
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d740981d25ee4b445e195a1e4a37630b";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>